<template>
  <div class="menu-box">
    <div
      class="menu-box-item"
      v-for="(item, index) in menuList"
      :key="item.id"
      @click="routerChange(item, index)"
      :class="selIndex == index ? 'menu-box-item-yes' : 'menu-box-item-no'"
    >
      <div
        class="menu-text"
        :class="selIndex == index ? 'menu-sel-yes' : 'menu-sel-no'"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "set",
  props: {
    navNum:{}
  },
  data() {
    return {
      menuList: [
        {
          name: "首页",
          url: "/",
          id: 1,
        },
        {
          name: "推荐",
          url:"/commend",
          id: 2,
        },
        {
          name: "找帮帮",
          url:"/help",
          id: 3,
        },
        {
          name: "常见问题",
          url:"/problem",
          id: 4,
        },
        {
          name: "知识区",
          url:"/knowledge",
          id: 5,
        },
        {
          name: "活动",
          url:"/events",
          id: 6,
        },
      ],
      selIndex: -1,
    };
  },
  watch: {
    
  },
  mounted() {
    let currentUrl = this.$route.path;
    if (currentUrl == "/") {
      this.selIndex = 0;
    } else if (currentUrl == "/commend") {
      this.selIndex = 1;
    } else if (currentUrl == "/help") {
      this.selIndex = 2;
    } else if (currentUrl == "/problem") {
      this.selIndex = 3;
    } else if (currentUrl == "/knowledge") {
      this.selIndex = 4;
    }else if (currentUrl == "/events") {
      this.selIndex = 5;
    }
  },
  methods: {
    routerChange(val, index) {
      this.selIndex = index;
      this.$router.push(val.url);
    },
  },
};
</script>
<style lang="less" scoped>
.menu-box {
  display: flex;
  align-items: center;
  height: 100%;
  .menu-box-item:nth-child(1) {
    margin-left: 30px;
  }
  .menu-box-item {
    min-width: 35px;
    margin-left: 40px;
    .menu-text {
      cursor: default;
      font-size: 16px;
      font-weight: 500;
    }
    .menu-sel-yes {
      color: #4095e5;
      font-size: 16px;
      font-weight: 500;
      line-height: 22px;
      border-bottom: 2.5px solid #4095e5;
      text-align: center;
    }
    .menu-sel-no {
      line-height: 22px;
      color: #ffffff;
      font-size: 16px;
      text-align: center;
      // margin-left: 10px;
    }
  }
}
</style>
